<template>
	<view class="page-wrap">

		<u-sticky :h5-nav-height="0" bg-color="transparent">
			<view class="sticky-bg">
				<u-navbar title-bold :is-fixed="false" :titleSize="34" :is-back="false" :border-bottom="false"
					:background="{background:'transparent'}" title-color="#2F3033">
					<template v-slot:left>
						<view class="back-wrap">
							<image src="/yixu/static/images/dynamic_code/back.png"></image>
							<text>动态码</text>
						</view>
					</template>
				</u-navbar>
			</view>
		</u-sticky>
		<Buy v-if="paid_status == 0" :buyInformation="buyInformation"></Buy>
		<template v-else>
			<index v-if="current === 0" @check="onCheck" @to="toPage" />
			<product_list v-if="current === 1" />
			<qrcode_list v-if="current === 2" />
			<u-tabbar v-model="current" active-color="rgba(32, 141, 247, 1)" height="115rpx" inactive-color="#8E929D"
				:list="list" :border-top="false" />
		</template>

	</view>
</template>

<script>
	import index from './comps/index.vue'
	import qrcode_list from './comps/qrcode_list.vue'
	import product_list from './comps/product_list.vue'
	import Buy from "../../../pages/qr_code/components/buy.vue";
	import {
		createQrCodeNum
	} from "../../../api/app.js";

	function getResourceUrl(uri) {
		return `https://theme.lanbaozixun.com/lbzx${uri}`;
	}
	import {
		mapGetters,
	} from "vuex";
	export default {
		components: {
			Buy,
			index,
			product_list,
			qrcode_list,
		},
		data() {
			return {
				paid_status: -1,
				buyInformation: {
					buy_price: 0,
					buy_item_id: 0,
					month_price: 0,
					month_item_id: 0,
					year_price: 0,
					year_item_id: 0,
				},
				list: [{
						iconPath: getResourceUrl("/dynamic_code/tabbar/1.png"),
						selectedIconPath: getResourceUrl("/dynamic_code/tabbar/1-active.png"),
						text: "首页",
						customIcon: true,
					},
					{
						iconPath: getResourceUrl("/dynamic_code/tabbar/2.png"),
						selectedIconPath: getResourceUrl("/dynamic_code/tabbar/2-active.png"),
						text: "产品列表",
						customIcon: true,
					},
					{
						iconPath: getResourceUrl("/dynamic_code/tabbar/3.png"),
						selectedIconPath: getResourceUrl("/dynamic_code/tabbar/3-active.png"),
						text: "二维码",
						customIcon: true,
					},
					// {
					//   iconPath: getResourceUrl("/dynamic_code/tabbar/4.png"),
					//   selectedIconPath: getResourceUrl("/dynamic_code/tabbar/4-active.png"),
					//   text: "我的",
					//   isDot: false,
					//   customIcon: true,
					// },
				],
				current: 0,
			};
		},
		onLoad() {
			uni.$once('h5ShareSetFinished',function(w,o){
				o.shareTitle = '动态码制作';
				o.shareDesc = '动态码制作';
				w.share(o)
			})
		},
		onShareAppMessage() {
			const shareInfo = Cache.get("shareInfo");
			return {
				title: '动态码制作',
				path: "yixu/pages/dynamic_code/index?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		onShareTimeline() {
			const shareInfo = Cache.get("shareInfo");
			return {
				title: '动态码制作',
				path: "yixu/pages/dynamic_code/index?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		computed: {
			...mapGetters(["inviteCode"]),
		},
		methods: {
			async onCheck() {
				let {
					data,
					code
				} = await createQrCodeNum()
				this.paid_status = data.paid_status
				if (this.paid_status == 0) {
					this.buyInformation.buy_price = data.buy_price
					this.buyInformation.year_price = data.year_price
					this.buyInformation.month_price = data.month_price
					this.buyInformation.buy_item_id = data.buy_item_id
					this.buyInformation.year_item_id = data.year_item_id
					this.buyInformation.month_item_id = data.month_item_id
				}
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap {
		background-image: url("https://theme.lanbaozixun.com/lbzx/dynamic_code/bg.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position-y: -50rpx;
		height: 100vh;
		background-color: #F5F5F5;

		//background-color: white;
	}

	.sticky-bg {
		background: url("https://theme.lanbaozixun.com/lbzx/dynamic_code/bg.png");
		background-size: 100%;
	}

	.back-wrap {
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		gap: 10rpx;

		image {
			width: 30rpx;
			height: 30rpx;
		}

		text {
			font-weight: bold;
		}
	}
</style>